サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【1. Installation】

こんにちは。DA事業本部の春田です。

普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。

今回は、一番最初のInstallationです。

はじめに

互換性の注意

最初のセクションは「互換性の注意」についてです。ECMAScript 5とun-shimmableが、早速「ちょっと何言ってるかわからない」ポイントだったので調べてみました。

Vue.js uses ECMAScript 5 features that are un-shimmable in IE8

ECMAScript5は2009年にリリースされたJavaScriptの標準仕様のことで、プログラミング言語でいうバージョンのようなものです。ただし、JavaScriptの実行環境は閲覧者側のブラウザ上なので、そのブラウザが指定のバージョンに対応できていないと動きません。IE8(Internet Explorer8)はWindows7のデフォルトのブラウザということで、2020年現在もまだ利用者が多そうなブラウザですが、ECMAScript5は非対応のためVue.jsで作ったサイトは見れないということです。うーん、闇が深そう。

un-shimmableの "shim" とは、古い環境で新しいAPIを使うためのパッチのようなもので、Vue.jsの機構は、IE8に対してパッチを当ててもどうにもならないコアの部分に違いがあるため、「シムできない」という意図の "un-shimmable" という表現のようです。

参照

• ES2015（ECMAScript 2015）とは何か | Think IT（シンクイット）
• ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita
• Shim と Polyfill - Qiita
• javascript - What does un-shimmable mean? - Stack Overflow

セマンティックバージョニング

「セマンティックバージョニング」についてです。セマンティックバージョニングって何だ？と思ったら、よく見る「MAJOR.MINOR.PATCH」で分けるバージョニング方法のことでした。Vue.jsはそれに準拠しているよ、ということですね。

リリースノート

2020年4月現在の最新のstableバージョンは2.6.11です。

Vue.jsの開発ツール

Vue.jsでは、開発が捗るChrome拡張やFirefoxアドオンが用意されています。

vuejs/vue-devtools: Browser devtools extension for debugging Vue.js applications.

インストール方法

直接scriptタグを組み込んでインストール

Vue.jsはJavaScriptでできているので、ソースをダウンロードしてscriptタグで組み込めば使えるようになります。用意されているCDNを使えば、さらに手軽に導入できます。

<!-- 最新バージョン → 開発や学習目的に -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- バージョン指定 → プロダクション用に-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

気になったのは、以下の文。ES Modulesってなんぞや？

If you are using native ES Modules, there is also an ES Modules compatible build:

ES Modulesは、ES2015で定義されたJavaScriptから外部ファイルのJavaScriptを使用するための仕組みです。それまでは、

<script src="js/app.js"></script>

のようにHTMLに記述する必要があったのですが、ES Modulesの登場によってJavaScript間で関数などを共有できるようになりました。これまでもexportは何気なく使ってましたが、ES Modulesが起源だったんですねー。ES Modulesを使ったビルド方法だと、以下のようになります。

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

参照

• ES modules基礎知識 - 仕様の概要とその周辺課題 | CodeGrid
• ブラウザで覚えるES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA

npmでインストール

Vue.jsを使って大規模なアプリケーションを構築する場合は、npmでのインストールが推奨されています。npmはNode.jsのパッケージマネージャですね。Node.jsはサードパーティの開発も盛んなようで、便利なパッケージが色々あります。（Top 30 NPM Packages for Node.js Developers 2019 - Colorlib）

Node.js自体にも組み込みのモジュールがあり、こちらは主にWeb周りの機能がリッチみたいです。（Index | Node.js v13.14.0 Documentation）

# latest stable
$ npm install vue

It pairs nicely with module bundlers such as Webpack or Browserify.

WebpackとBrowserifyについて詳しく調べてみます。以前からWebpackという単語はよく目にしていましたが、Webpackとは作成した複数のjsファイルやcssファイルなどをまとめるツール（モジュールバンドラ）です。ひとつにまとめることで、ブラウザへの転送速度が速くなったり、jsファイルを機能ごとに分けて開発できたりします。

Browserifyもモジュールバンドラの一つで、Webpackよりもシンプルですが、ビルド速度などはWebpackよりも遅いみたいです。ググっていると、BrowserifyからWebpackへ移行した話が多く見られました。

Vue also provides accompanying tools for authoring Single File Components

Single File Componentsは、一つのファイルにHTMLとJSとCSSを記述してページを作るVueのお作法です。.vueという独自の拡張子がつきます。後の章で詳しく掘り下げます。

参照

• 最新版で学ぶwebpack 4入門 - JavaScriptのモジュールバンドラ - ICS MEDIA

vue-cliでインストール

npmでの環境構築すら面倒な場合は、Vue CLIという公式の開発キットが使えば、数手順で簡単にVue.jsに必要な環境を構築できます。ただし、Node.jsやビルドツールの知識がない人には使用をオススメしていないようです。

npm install -g @vue/cli

ビルドについて

ビルドの種類

In the dist/ directory of the NPM package

directory of the NPM packageのリンク先にはVue.jsのビルド済みファイルが複数配置されています。分類すると、以下の表のようになります。

	UMD	CommonJS	ES Module (for bundlers)	ES Module (for browsers)
Full (Runtime + Compiler)	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js	-
Full (production)	vue.min.js	-	-	vue.esm.browser.min.js
Runtime-only (production)	vue.runtime.min.js	-	-	-

FullとRuntime-onlyの違いは、ビルドにコンパイラが含まれるか含まれないかになります。templateオプションに文字列を渡す時など、クライアント側でもコンパイルが必要な場合はFullを使用します。必要ない場合は、サイズが30%軽いRuntime-onlyを使用することを推奨しています。

// this requires the compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

// this does not
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

CommonJSとUMDは、ざっくり言えば古くからあるモジュール管理の手法です。CommonJSはモジュールを同期的にインポートし、ブラウザではなくバックエンドで動きます。browserifyやwebpack1といった古いバンドラで使われていることが多いです。一方、UMDはバックエンドとフロントエンド両方に対応したユニバーサルな手法で、Vue.jsではscriptタグ内で使われていることを想定しています。

そういった歴史を経て、先ほども触れたES Moduleがデビューしたわけですね。for bundlersはwebpack2やRollupといったモダンなバンドラで使用され、for browsersでは

<script type="module">

タグによるブラウザ上での直接インポートを想定しています。上の表の通りそれぞれのビルド方式に違いがあるので、目的に合わせて使い分けます。

ページを下っていくと、WebpackとBrowserify以外に、新しくRollupとParcelというモジュールバンドラが登場してきました。どちらもわりかしモダンなバンドラで、複雑なWebpackより学習コストが低くなるようシンプルに設計されているみたいです。（バンドラの種類が多すぎる…）

参照

• What are CJS, AMD, UMD, and ESM in Javascript? - DEV
• Rollup の使い方 - ナデズダ・ゴボリン
• Parcel 入門 ～Parcelはwebpackの代わりになるのか～ - Qiita

開発モードと本番モード

UMDのビルドでは、開発モードと本番モードはすでにハードコードされており、本番モードでは縮小ファイルがビルドされます。縮小ファイルとは、サイズ削減や難読化のためにスペースや改行が省かれたファイルのことですね。

一方、CommonJSとES Moduleのビルドはバンドルで使用するので、縮小バージョンが提供されていません。最終的なファイルの縮小は、開発者が各自で行います。ただし、CommonJSとES Moduleのビルドにも開発モードと本番モードはあり、process.env.NODE_ENVを参照して決定しています。これによって、設定ファイルやUglifyJSのようなコードを縮小・難読化するツールの使用を、環境ごとに使い分けることができます。

参照

• UglifyJS で ES2015 を minify する - Qiita

CSP環境

Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of new Function() for evaluating expressions.

ここでContent Security Policy (CSP)という新しい用語が出てきました。CSPとは、ウェブサーバーからのHTTPヘッダにContent-Security-Policyを埋め込んで有効化することができるセキュリティ・レイヤーです。クロスサイトスクリプティングやデータインジェクション攻撃による、データの窃取からサイトの改ざん、マルウェアの拡散を、設定したポリシーに沿って予防してくれます。このSCPでは、new Function()の使用が禁止されているということですね。

Fullビルドの方式は、テンプレートをコンパイルする際、式の評価にnew Function()を使っているため、CSPが有効なサイトでは使用することができません。一方、Runtime-onlyビルドの方式はSCPに準拠しており、コンパイル前にテンプレートがrender関数へ変換されるため、SCP環境でも使用することができます。

簡単に言えば、「CSPを設定してセキュアなサイトを作成したい場合は、Runtime-onlyビルドで動くサイトにしてね」ということでしょうか。Runtime-onlyビルドの方が軽量でもあるので、なるべくこの方式で完結するサイトにしたいところです。

参照

• Content Security Policy でユーザーを守ろう
• コンテンツセキュリティポリシー (CSP) - HTTP | MDN

開発版のビルド

最新のソースコードからVue.jsを使いたい場合は、自分でビルドしてね、ということです。

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

おわりに

じっくり読んでみたら、Vue.jsからJavaScriptの背景まで知ることができました。JavaScriptの歴史は複雑ですね…。今回はインストール編でしたが、実際のインストールは次回から必要な時に最小限のもので行いたいと思います。

次回